<template>
  <div class="search">
    <div class="search_wrap">
      <van-search
        @input="dosearch"
        v-model.trim="key"
        placeholder="请输入搜索关键词"
        shape="round"
      />
      <div v-if="key == ''">
        <div class="hot_title">✨热门搜索🩸</div>
        <div class="hot">
          <div
            class="hotText"
            v-for="(item, index) in hotSearchList"
            :key="index"
            @click="dosearch(item.first)"
          >
            <span class="text">{{ item.first }}</span>
          </div>
        </div>
      </div>
      <div class="searchList" v-else>
        <div class="hot_title">✨最佳匹配🩸</div>
        <van-cell
          :title="item.name"
          :label="item.ar[0].name + ' - ' + item.name"
          center
          v-for="item in SearchList"
          :key="item.id"
          @click="$router.push({ name: 'play', query: { id: item.id } })"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="play-circle-o" size="20" />
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { hotSearchListAPI, SearchListAPI } from '@/api'
export default {
  name: 'search',
  data () {
    return {
      key: '',
      hotSearchList: [],

      SearchList: [], // 搜索列表
      timer: '' // 防抖
    }
  },
  methods: {
    dosearch (item) {
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        //  点击热词搜索
        // if (item) { // vant组件van-search会判断是否为空，所以直接赋值即可(不需要if判断)
        this.key = item
        // }
        // 删除输入框
        if (this.key === '') {
          return (this.SearchList = [])
        }
        let res = await SearchListAPI({ keywords: this.key })
        //  确保官网数据不为空
        if (res.data.result && res.data.result.songs) {
          this.SearchList = res.data.result.songs
          // console.log(this.SearchList)
        } else {
          this.SearchList = []
        }
      }, 200)
    }
  },
  async created () {
    let res = await hotSearchListAPI()
    // console.log(res)
    this.hotSearchList = res.data.result.hots
  }
}
</script>

<style>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
.van-search {
  margin-top: -45px;
  margin-bottom: 15px;
  padding: 0;
}
.hotText {
  float: left;
  /* position: absolute; */
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 35px;
  font-size: 14px;
  border: 1px solid #dee1e6;
  height: 28px;
  /* width: 50px; */
  margin: 10px 9px 0 0px;
  padding: 0 10px 0;
}
</style>
